<template>
  <div class="u-flex">
    <div class="left">
      <div class="title">
        <a-input placeholder="请输入" />
      </div>
      <a-list>
        <a-list-item
          :class="{
            active: index === listIndex,
          }"
          v-for="(item, index) in list"
          @click="listIndex = index"
          :key="index"
          >{{ item.name }}</a-list-item
        >
      </a-list>
    </div>
    <div class="right">
      <a-tabs>
        <a-tab-pane v-for="pane in panes" :key="pane.key" :tab="pane.title">
        </a-tab-pane>
      </a-tabs>
      <div>
        <u-button icon="btn-add" class="mb-10" @click="add">新增</u-button>
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        size="small"
        :pagination="false"
        :loading="loading"
        style="margin-top: 10px"
        rowKey="index"
        class="overflow-auto"
      >
        <span slot="action" class="button-text"> 删除 </span>
      </a-table>
      <Pagination
        :total="total"
        :defaultPage="page"
        :defaultCurrent="current"
        @sizeChange="
          (val) => {
            page = val;
            current = 1;
            search();
          }
        "
        @currentChange="currentChange"
      />
      <a-modal
        title="新增"
        :maskClosable="false"
        :keyboard="false"
        :visible="visible"
        :footer="null"
        centered
        :width="600"
        @cancel="visible = false"
      >
        <a-form-model
          ref="ruleForm"
          :model="form"
          :rules="rules"
          labelAlign="right"
          layout="horizontal"
          :label-col="{ span: 4 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-model-item label="动作：" prop="terminal_name">
            <a-radio-group v-model="form.terminal_name">
              <a-radio value="1">通过</a-radio>
              <a-radio value="2">拒绝</a-radio>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="IP地址" prop="ip_address">
            <IpAddressVue placeholder="" v-model="form.ip_address" />
          </a-form-model-item>
          <a-form-model-item label="端口" prop="port">
            <a-input v-model="form.port" />
          </a-form-model-item>
          <a-form-model-item label="通信协议" prop="protocol">
            <a-select v-model="form.protocol" placeholder="请选择">
              <a-select-option value="1">tcp</a-select-option>
              <a-select-option value="2">udp</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-form-model>
        <div class="flex flex-end mt-10">
          <u-button
            type="default"
            style="font-weight: bold"
            @click="visible = false"
            >取消</u-button
          >
          <u-button class="ml-10 btn-default btn-confirm" @click="confirm">
            确定
          </u-button>
        </div>
      </a-modal>
    </div>
  </div>
</template>
<script>
const columns = [
  {
    title: "ID",
    key: "id",
    dataIndex: "id",
    width: 100,
  },
  {
    title: "状态",
    key: "status",
    width: 60,
    dataIndex: "status",
  },

  {
    title: "通信协议",
    width: 100,
    key: "communicationProtocol",
    dataIndex: "communicationProtocol",
  },
  {
    title: "IP地址",
    key: "ipAddress",
    dataIndex: "ipAddress",
    width: 120,
  },
  {
    title: "端口",
    key: "port",
    dataIndex: "port",
    width: 100,
  },
  {
    title: "动作",
    key: "action",
    dataIndex: "action",
    width: 80,
  },
  {
    title: "备注",
    key: "system_cpu_usage",
    width: 180,
  },
  {
    title: "操作",
    key: "action1",
    width: 60,
    scopedSlots: { customRender: "action" },
  },
];
import Pagination from "@/components/Pagination.vue";
import IpAddressVue from "@/components/IpAddress.vue";
import { mockAccess } from "../../config/main/data/access";

const validIpAdress = (field, value, callback) => {
  const reg =
    /^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(?::(?:[0-9]|[1-9][0-9]{1,3}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5]))?$/;
  if (reg.test(value)) {
    return callback();
  }
  callback(new Error("请输入正确的IP地址"));
};
export default {
  components: {
    Pagination,
    IpAddressVue,
  },
  data() {
    return {
      listIndex: 0,
      panes: [
        { title: "入站规则", key: "1" },
        { title: "出站规则", key: "2" },
      ],
      list: [
        {
          id: 1,
          name: "pc_00001",
        },
        {
          id: 2,
          name: "pc_00002",
        },
        {
          id: 3,
          name: "pc_00003",
        },
        {
          id: 4,
          name: "pc_00004",
        },
        {
          id: 5,
          name: "pc_00005",
        },
      ],
      columns,
      loading: false,
      page: 10,
      current: 1,
      data: mockAccess,
      total: 3,
      form: {
        terminal_name: "1",
        port: "",
        ip_address: "",
        protocol: undefined,
      },
      visible: false,
      rules: {
        terminal_name: [{ required: true, message: "请选择", trigger: "blur" }],
        port: [{ required: true, message: "请输入端口", trigger: "blur" }],
        ip_address: [
          { required: true, message: "请输入IP地址", trigger: "blur" },
          { validator: validIpAdress, trigger: "blur" },
        ],
        protocol: [{ required: true, message: "请选择", trigger: "blur" }],
      },
    };
  },
  methods: {
    currentChange(val) {
      this.current = val;
      this.search();
    },
    confirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$message.success("新增成功");
          this.visible = false;
        }
      });
    },
    add() {
      this.visible = true;
    },
  },
};
</script>

<style lang="scss">
.access .app-main {
  background: none;
  padding: 0;
}
</style>

<style lang="scss" scoped>
.left {
  margin-right: 20px;
  position: relative;
  border-radius: 4px;
  padding: 20px 10px;
  background: #fff;
  width: 200px;
  flex-shrink: 0;

  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.right {
  flex: 1;
  position: relative;
  border-radius: 4px;
  padding: 20px;
  background: #fff;
}

.ant-list {
  margin-top: 10px;
}
.ant-list-item {
  padding: 5px 10px;
  border-bottom: 0;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 4px;

  &:hover {
    background-color: #f5f5f5;
  }

  &.active {
    background-color: #f5f5f5;
  }
}
</style>
